<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="less/upload-temp.css">
    <script src="../src/lib/jquery.js"></script>
    <style>
        .demo{
            width:600px;
            height:500px;
            background-color:#dbdbdb;
            margin:0 auto;
        }
        .btn{
            display: inline-block;
            width: 100px;
            height:30px;
            border-radius: 5px;
            background-color: #1fb394;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            color:#fff;
        }
    </style>
</head>
<body>


<div class="demo">

    <form action="http://127.0.0.1/demo2.php" method="post" enctype="multipart/form-data">
        <ul data-name="a" class="img-upload clearfix">
            <li class="upload-list upload-add"><label><input multiple id="file" type="file" class="hide"></label></li>
        </ul>
        <button type="submit">go</button>
    </form>


</div>



<script>

    var up = {
        arrImg : [],
        initEvent:function(){
            var _this = this;
            $('#file').on('change',function(){
                var that = $(this);
                var mes = _this.readFileRule(that,500,2);
                if(!mes){
                    _this.upLoadImg(that);
                }else{
                    console.log(mes)
                }
            });
            //删除事件
            $('body').on('click','.icon-remove',function(){
                var parent = $(this).parents('.upload-list');
                _this.arrImg.splice(parent.index(),1);
                parent.remove();
            });

            //提交事件
            $('.btn').on('click',function(){
                _this.upLoad($("[name='upload[]']"),'')
            })
        },

        //校验图片格式
        readFileRule: function(file,size,num){
            var fileDom = file[0].files;
            let mes = '';
            for(let i = 0;i<fileDom.length;i++){
                if(size && (fileDom[i].size/1000)>size){
                    mes = 'size';
                    break;
                }else if(!/(jpeg)|(png)|(jpg)|(gif)$/.test(fileDom[i].type)){
                    mes = 'type';
                    break;
                }
            }
            if(num && fileDom.length+this.arrImg.length > num){
                mes = 'length'
            }
            return mes;
        },

        upLoadImg:function(input){
            var _this = this;
            var fd = new FormData();
                input.each(function(index,item){
                    fd.append('upload[]',item.files[index])
                });
            $.ajax({
                type : 'post',
                url : 'http://127.0.0.1/demo2.php',
                data : fd,
                cache : false,
                processData : false,
                contentType : false,
                success : function(data){
                    _this.saveImgUrl(data,input)
                },
                error : function(){
                    console.log('err')
                }
            })
        },

        saveImgUrl:function(data,input){
            var src = '';
            var pr = input.parents('.upload-add');
            var template = '<li class="upload-list">' +
                    '<div class="list-layer"><i class="icon-remove">&times;</i></div>' +
                    '</li>';
            var str = $(template);
            str.css('background-image',"url("+src+")");
            pr.before(str);
            this.arrImg.push(src);
            input.val('')
        }
    };
    up.initEvent();

</script>

</body>
</html>

